<template>
	<view class="list animate__animated animate__fadeIn">
		<cl-tabs
			v-if="show"
			v-model="active"
			:list="list[cache.lang]"
			color="#333333"
			un-color="#333333"
			:height="90"
		></cl-tabs>
		<view class="imglist">
			<image class="img" src="/static/images/banner1.jpg" mode="aspectFill"></image>
			<image class="img" src="/static/images/banner2.jpg" mode="aspectFill"></image>
			<cl-loadmore
				background-color="#fff"
				:loading="false"
				:finish="true"
				:text="$t('loadmore.text')"
				:loading-text="$t('loadmore.loadingText')"
				:finish-text="$t('loadmore.finishText')"
			></cl-loadmore>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { useStore } from "/@/cool";
import { ref, reactive, watch } from "vue";
const show = ref(true);
const { cache } = useStore();
const active = ref<number>(0);
watch(
	() => cache.lang,
	(newValue, oldValue) => {
		show.value = false;
		setTimeout(() => {
			show.value = true;
		}, 10);
	},
);
const list = ref<any>({
	zh: [
		{
			value: 0,
			label: "交警服务",
		},
		{
			value: 1,
			label: "交通局服务",
		},
		{
			value: 2,
			label: "城市服务",
		},
		{
			value: 3,
			label: "违章缴费",
		},
		{
			value: 4,
			label: "保险提醒",
		},
		{
			value: 5,
			label: "年检提醒",
		},
		{
			value: 6,
			label: "洗车服务",
		},
		{
			value: 7,
			label: "代驾服务",
		},
	],
	en: [
		{
			value: 0,
			label: "Traffic police",
		},
		{
			value: 1,
			label: "Transport bureau",
		},
		{
			value: 2,
			label: "City",
		},
		{
			value: 3,
			label: "Pay the fees",
		},
		{
			value: 4,
			label: "Insurance",
		},
		{
			value: 5,
			label: "Annual inspection",
		},
		{
			value: 6,
			label: "Car washing",
		},
		{
			value: 7,
			label: "Substitute driving",
		},
	],
});
</script>
<style lang="scss" scoped>
.list {
	position: relative;
	top: -20rpx;
	width: 100%;
	background: #ffffff;
	box-shadow: 0rpx -10rpx 20rpx 0rpx rgba(39, 43, 46, 0.2);
	border-radius: 20rpx 20rpx 0rpx 0rpx;
	overflow: hidden;
	padding-top: 20rpx;
	:deep(.cl-tabs__label) {
		span {
			font-family: PingFangSC;
			font-weight: 400;
			font-size: 32rpx;
			color: #333333;
		}
	}
	:deep(.cl-tabs__line) {
		width: 60rpx;
		height: 2rpx;
		background: #333333;
	}
	:deep(.cl-tabs__bar-box) {
		border-bottom: 2rpx solid #dedede;
	}
	.imglist {
		padding: 30rpx;
		.img {
			display: block;
			width: 690rpx;
			border-radius: 30rpx;
			margin-bottom: 30rpx;
			box-shadow: 0 0.1875rem 0.25rem 0 rgba(85, 85, 85, 0.2);
		}
	}
}
</style>
